// import { Select } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { DICT_DEFAULT_CONFIG } from "@/constants/dict"
import { useOptions } from "@/hooks"
//import { useOptions } from "@/hooks/useOptions"
import { useLocale } from "@/locales"

export type RegisterDeviceSelectorField = {
	registerDeviceType: string
}
export const RegisterDeviceSelector: FC<any> = props => {
	const { rules, disable, labelProps, selectorProps, fieldName, label, modal, deviceTypes, mode } = props
	const { formatMessage } = useLocale()
	let data
	switch (deviceTypes) {
		case "loginDevice":
			data = Object.entries(DICT_DEFAULT_CONFIG.loginDeviceType)
			break
		default:
			data = Object.entries(DICT_DEFAULT_CONFIG.deviceType)
	}
	const options = modal
		? useOptions({ modal: modal, func: formatMessage, strictlyLabel: false })
		: data.map(item => ({ value: item[1].value, label: item[1].label }))

	return (
		<SFormItem
			name={fieldName ?? "registerDeviceType"}
			label={label ?? `${formatMessage({ id: "label.register_device" })}:`}
			rules={rules}
			{...labelProps}
		>
			<StyleSelect
				placeholder={formatMessage({ id: "label.select_all" })}
				allowClear
				options={options}
				disable={disable}
				{...selectorProps}
				mode={mode}
			/>
		</SFormItem>
	)
}
